<template>
	<view>
		<!-- 要@scrolltolower方法可用，必须设置scroll-view 的高度 -->
		<scroll-view :scroll-y="true" 
		class="scroll"
		v-if="typeList.length !== 0"
		@scrolltolower="loadData">
			<view v-for="(item,index) in typeList" :key="index" 
			class="mid">
				<text @click="toDetails(item)">{{item.content}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getJoke} from "../../api/book.js"
	export default {
		data() {
			return {
				params:{
					type:"pic",
					page:1,
					pagesize:10
					},
				typeList:[],
			}
		},
		onLoad(option) {
			this.params.type = option.type
			this.loadData();
		},
		methods: {
			loadData(){
				uni.showLoading({
					title:"loading..."
				})
				getJoke(this.params).then(res=>{
					// console.log(res)
					// 数组解构的工作原理与对象解构几乎相同，但使用方括号而不是花括号
					let [error, rlt] = res
					console.log(rlt.data.data)
					if(this.typeList.length !== 0)
						this.typeList = this.typeList.concat(rlt.data.data)
					else
						this.typeList = rlt.data.data
					this.params.page++
					uni.hideLoading()
				})
			},
			toDetails(item){
				uni.navigateTo({
					url:"../details/details?item=" + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss">
.scroll{
	height: 667*2upx;
	white-space: nowrap
}
.mid{
	margin: 10px;
	padding: 10px;
	background-color: #3F536E;
}
</style>
